@use "~/styles/variables.scss" as *;

.bills-detail-page {
    height: 100vh;
    .page-body {
        overflow: auto;
        .bill-detail-card {
            width: 700rpx;
            margin: 25rpx; 
            border-radius: 25rpx;
            box-sizing: border-box;
            padding: 50rpx;
            padding-top: 25rpx;
            .form-line-container::after {
                content: "";
                display: block;
                width: 200%;
                height: 0;
                border-bottom: 1rpx solid;
                transform: scale(0.5);
                position: relative;
                left: -50%;
                opacity: 0.5;
            }
            .bill-amount {
                font-size: 60rpx;
                line-height: 120rpx;
                &.income {
                    color: $color-income;
                }
                &.pay {
                    color: $color-pay;
                }
            }
            .bill-info-item {
                width: 100%;
                padding: 25rpx 0;
                line-height: 60rpx;
                .bill-info-value {
                    font-weight: 500;
                    padding-left: 10rpx;
                }
            }
        }
    }
    .page-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 122rpx;
        width: 750rpx;
        z-index: 99;
        padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
        padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
        .half-line {
            border-bottom: 1rpx solid;
            width: 200%;
            transform: scale(0.5);
            opacity: 0.2;
        }
        .comment-input-container {
            width: 100%;
            height: 120rpx;
            padding: 25rpx;
            box-sizing: border-box;
            .comment-input {
                height: 60rpx;
                border-radius: 40rpx;
                padding: 10rpx 25rpx;
                background-color: rgba(0,0,0,0.05);
            }
            .btn {
                height: 80rpx;
                box-sizing: border-box;
                border-radius: 40rpx;
                color: #fff;
                text-align: center;
            }
            .preview-btn {
                background-color: rgba(0,0,0,0.4);
                width: 160rpx;
            }
            .save-btn {
                background-color: red;
                width: 460rpx;
            }
        }
    }
}